Skip to content

[NO-ISSUE] refactor: replace Label Required tag with inline * (Required) indicator#710

Open
isaquebock wants to merge 5 commits into
devfrom
refactor/label-required-indicator
Open

[NO-ISSUE] refactor: replace Label Required tag with inline * (Required) indicator#710
isaquebock wants to merge 5 commits into
devfrom
refactor/label-required-indicator

Conversation

@isaquebock

Copy link
Copy Markdown
Contributor

Summary

Swaps the Tag badge used by the Label component for the required state (severity="warning" size="small" value="Required") for a lighter inline text indicator: <span aria-hidden="true">*</span> (Required) — the * colored var(--primary) (the F3652B orange) and the parenthesized (Required) in var(--text-muted).

  • The asterisk is decorative (aria-hidden="true"), so screen readers announce only "(Required)" alongside the label text.
  • Tag is no longer imported by label.vue.
  • Spec (.specs/label.md) body updated (Purpose, Props JSDoc, Tokens, Accessibility) and checksum refreshed.

Notes

  • Effect propagates automatically to every consumer of <Label :required>: field-text, field-password, field-checkbox, field-radio, field-switch, field-textarea, and the upcoming field-input-group (opened separately as PR [NO-ISSUE] feat: add InputGroup composition component with Addon sub-component #709).
  • No prop API change on Label (required: boolean behavior is unchanged; only the visual/textual form differs).
  • No dependencies added or removed.

Test plan

  • pnpm storybook:dev — open Components/Inputs/LabelRequired story. Verify the * (Required) text appears in place of the old orange Tag chip.
  • Same page for every Field* component with required=true — all inherit the new indicator without further edits.
  • Screen reader smoke test: with a screen reader active, the label reads " (Required)" (no "asterisk" spoken).

… indicator

The Required tag (severity=warning size=small) is replaced by inline
text 'asterisk + Required', where the asterisk uses var(--primary)
(orange F3652B) and the word Required uses var(--text-muted). The
asterisk is decorative (aria-hidden=true) so screen readers announce
only 'Required' alongside the label text.

Applies uniformly across every consumer of Label with required=true:
field-text, field-password, field-input-group, field-checkbox,
field-radio, field-switch, field-textarea. Tag component is no longer
imported by label.vue.

Spec body updated (Purpose, Props JSDoc, Tokens, Accessibility);
checksum refreshed to e261b72f (also fixes a pre-existing checksum
drift on label.md that the enforce-spec-exists hook flagged when this
change tried to write).
…parentheses

Wrap the required word in parentheses and add a space between the
asterisk and the parenthesized text, producing '* (Required)' instead
of the previous '*Required'. The asterisk stays orange (var(--primary))
and (Required) stays muted (var(--text-muted)); the * remains
aria-hidden so screen readers still announce only '(Required)'.

Spec Purpose, Props JSDoc, Tokens, and Accessibility sections updated
to match; checksum refreshed.
@isaquebock isaquebock requested a review from a team as a code owner July 1, 2026 16:05

@HerbertJulio HerbertJulio left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Atualize os fields : field-text, field-password, field-checkbox, field-radio, field-switch, field-textarea, para que reflitam o estado atual, já que eles não estão sendo atualizados corretamente.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Development

Successfully merging this pull request may close these issues.

2 participants